<extend name="./Application/Admin/View/Layouts/application.html"/>

<block name="css">
    <style>
        .error {
            color: red;
        }
    </style>
</block>
<block name="content">
    <div class="admin-content">

        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">新增用户</strong> /
                <small>Create User</small>
            </div>
        </div>

        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-12">
                <div class="am-tab-panel">
                    <form class="am-form" action="{{:U('add_user')}}" method="post">
                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-3 am-text-right">
                                用户名
                            </div>
                            <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                <input type="text" class="am-input-sm" id="username" name="username">
                            </div>
                        </div>

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-3 am-text-right">
                                邮箱
                            </div>
                            <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                <input type="email" class="am-input-sm" id="email" name="email">
                            </div>
                        </div>

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-3 am-text-right">
                                手机号
                            </div>
                            <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                <input type="text" class="am-input-sm" id="mobile" name="mobile">
                            </div>
                        </div>

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-3 am-text-right">
                                新密码
                            </div>
                            <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                <input type="password" class="am-input-sm" id="password" name="password">
                            </div>
                        </div>

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-3 am-text-right">
                                确认密码
                            </div>
                            <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                <input type="password" class="am-input-sm" id="check_password" name="check_password">
                            </div>
                        </div>

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-3 am-text-right">
                                选择用户组
                            </div>
                            <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">

                                <volist name="groups" id="group">
                                    <label class="am-checkbox-inline">
                                        <input type="checkbox" id="check" value="{{$group.id}}" class="checked_id"
                                               name="group_id[]"/>{{$group.title}}
                                    </label>
                                </volist>

                            </div>
                        </div>

                        <div class="am-g am-margin-top am-u-lg-push-1">
                            <button type="submit" class="am-btn am-btn-primary">保 存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</block>

<block name="js">
    <script src="__PUBLIC__/vendor/validate/jquery.validate.js"></script>
    <script src="__PUBLIC__/vendor/validate/additional-methods.js"></script>
    <script src="__PUBLIC__/vendor/validate/localization/messages_zh.min.js"></script>

    <script>
        $(function () {
            $(".am-form").validate({
                onfocusout: function (element) {
                    $(element).valid();
                },

                rules: {
                    username:{
                        required: true,
                        minlength: 5,
                        maxlength: 20
                    },
                    email:{
                        required: true,
                        email: true
                    },
                    mobile: {
                        required: true,
                        isMobile: true
                    },
                    password:{
                        required: true,
                        minlength: 6
                    },
                    check_password:{
                        required: true,
                        minlength: 6,
                        equalTo:"#password", //前面要带一个#号
                    },
                    'group_id[]':{
                        required:true,
                    }
                },

                /**
                 * 自定义提示信息
                 */
                messages: {
                    username: {
                        required: "请输入用户名"
                    },
                    email: {
                        required: "请输入邮箱",
                        email: "请输入正确的邮箱格式"
                    },
                    mobile: {
                        required: "请输入手机号码"
                    },
                    password: {
                        required: "请输入密码",
                        minlength: "密码不能小于3个字符"
                    },
                    check_password: {
                        required: "请输入确认密码",
                        minlength: "密码不能小于3个字符",
                        equalTo: "请再次输入相同的值"
                    },
                }
            });
        });
    </script>
</block>


